<template>
  <view class="container">
    <view class="top">
      <view class="comment">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-model="commentParams.comment"
          placeholder="请输入评论"
          :maxlength="-1"
        ></uni-easyinput>
      </view>
      <view class="rate">
        <uni-rate v-model="commentParams.rate" allowHalf /><view
          class="rateNum"
        >
          {{ commentParams.rate }}分</view
        ></view
      >
      <view class="media">
        <uni-file-picker
          limit="9"
          title="最多选择9张图片"
          @select="select"
        ></uni-file-picker>
      </view>
    </view>
    <view class="bottom">
      <view class="cancel" @tap="cancel">取消</view>
      <view class="pubComment" @tap="pubComment">发表评论</view>
      <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog
          mode="base"
          title="提示"
          content="是否发表评论？"
          :duration="2000"
          :before-close="true"
          @close="pclose"
          @confirm="pconfirm"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getUserStorage } from "@/utils/storage";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { addCommentAPI } from "@/services";
onLoad((options: any) => {
  const user = getUserStorage().profile;
  let { id, type } = options;
  commentParams.value.id = id;
  commentParams.value.type = type;
  if (!user) {
    uni.showToast({
      title: "请先登录",
      icon: "none",
    });
    commentParams.value.userId = "123";
  } else {
    commentParams.value.userId = user.user_id;
  }
});
const commentParams = ref<any>({
  comment: "",
  rate: 0,
  id: 0,
  type: "",
  userId: "",
  image: [],
});
let popup = ref();
const select = (res: any) => {
  const filePath = res.tempFiles[0].file;
  // 调用 uni.uploadFile 方法上传文件
  uni.uploadFile({
    url: "https://nodes.kimhiz.asia/api/upload",
    filePath: filePath.tempFilePath,
    name: "file", // 这是后端用来解析文件流的字段名
    header: { type: "comment" },
    success: (res: any) => {
      // 请求成功，处理服务器响应
      const data: any = JSON.parse(res.data);
      if (data.code == 200) {
        // 如果服务器返回成功，更新预览图片的URL
        let img = data.data[0].replace(/\\/g, "/");
        commentParams.value.image.push(img);
      } else {
        // 服务器返回错误信息
        console.error("上传失败:", data.message);
      }
    },
    fail: (err) => {
      // 请求失败，打印错误信息
      console.error("请求失败:", err);
    },
  });
};

const cancel = () => {
  uni.navigateBack();
  console.log();
};
const pubComment = () => {
  popup.value.open();
  console.log(commentParams.value);
};
const pclose = () => {
  popup.value.close();
};
const pconfirm = async () => {
  if (commentParams.value.comment && commentParams.value.rate) {
    let res: any = await addCommentAPI(commentParams.value);
    if (res.code === 200) {
      popup.value.close();
      uni.navigateBack();
      uni.showToast({
        title: res.message,
        icon: "none",
      });
    } else {
      console.log(res.message);
    }
  } else {
    popup.value.close();
    uni.showToast({
      title: "请填写完整",
      icon: "none",
    });
  }
};
</script>

<style scoped lang="scss">
.container {
  padding: 20rpx;
  .top {
    border-radius: 15rpx;
    padding: 20rpx;
    background-color: white;
    font-size: 26rpx;
    color: #555;
    .rate {
      display: flex;
      align-items: center;
      padding: 10rpx 0;
      .rateNum {
        margin-left: 10rpx;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    .cancel,
    .pubComment {
      width: 49%;
      height: 80rpx;
      border-radius: 15rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }
    .pubComment {
      background-color: #ffa500;
      color: #fff;
    }
  }
}
</style>
